<!--添加修改角色信息-->
<template>
  <a-modal v-model="showAddTable" :mask-closable="false" :closable="false" :width="900"
           :title="title ? '报修新增' : '报修编辑'"
           :maskClosable="false"
           :destroyOnClose="true">
    <a-form :form="form" @keydown.native.enter.prevent="saveApply" class="modelSearch">
      <a-form-item label="仪器名称：" prop="name" v-bind="formStyle">
        <a-input
            placeholder="请输入仪器名称" ref="re"
            v-decorator="[
                        'name',
                        {
                            rules: [
                                { required: true, message: '请输入汉字、字母、数字、_或-字符' },
                                { validator: this.verify.validateName.bind(this) }
                            ],
                            getValueFromEvent: event => {
                                return this.verify.formalSpace(event)
                            }
                        }
                    ]"
        />
      </a-form-item>
      <a-form-item label="仪器编号：" prop="code" v-bind="formStyle">
        <a-input
            placeholder="请输入仪器编号" ref="re"
            v-decorator="[
                        'code',
                        {
                            rules: [
                                { required: true, message: '请输入英文、数字或下划线字符' },
                                { validator: this.verify.validateID.bind(this) }
                            ],
                            getValueFromEvent: event => {
                                return this.verify.formalSpace(event)
                            }
                        }
                    ]"
        />
      </a-form-item>
      <a-form-item label="申请实验室：" prop="labId" v-bind="formStyle" required>
        <a-select
            v-decorator="['labId', { rules: [{ required: true, message: '选择实验室' }] }]"
            placeholder="请选择实验室" v-model="labId"
            @select="changeLabList"

        >
          <a-select-option v-for="item in labSelectList" :value="item.value"
                           :key="item.value">{{ item.label }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="故障描述：" prop="description" v-bind="formStyle">
        <a-textarea
            placeholder="请输入故障描述" ref="re"
            v-decorator="[
                        'description',
                        {
                            rules: [
                                { required: true, message: '请输入汉字、字母、数字、_或-字符' },
                                { validator: this.verify.validateName.bind(this) }
                            ],
                            getValueFromEvent: event => {
                                return this.verify.formalSpace(event)
                            }
                        }
                    ]"
        />
      </a-form-item>
    </a-form>
    <div slot="footer">
      <a-button type="default" size="default" @click="cancelApply()">取消</a-button>
      <a-button type="primary" size="default" @click="saveApply()">确定</a-button>
    </div>
  </a-modal>
</template>

<script>
import verify from 'libs/verify'
import AFormItem from 'ant-design-vue/es/form/FormItem'

export default {
  name: 'addEdit',
  components: {
    AFormItem,
  },
  data() {
    return {
      verify,
      form: this.$form.createForm(this),
      showAddTable: false,
      input: false,
      labId: "",
      labObj: {},
      name: "",
      code: "",
      labAddress: "",
      description: "",
    }
  },
  computed: {
    labSelectList() {
      return this.$store.state.acManage.labSelectList
    },
    formStyle() {
      return this.$store.state.common.formStyle
    }
  },
  props: {

    title: {
      type: Boolean,
      required: true
    },
    objDTO: {
      type: Object,
      required: true
    }
  },
  watch: {},
  methods: {

    changeLabList(value) {
      let _this = this;
      let labSelectList = _this.labSelectList;
      for (let index in labSelectList) {
        if (labSelectList[index].value === value) {
          this.labObj = labSelectList[index].record
        }
      }
    },
    /**
     * Function    : saveApply
     * Description : 打开弹框
     * Input       : none
     * Return      : none
     */
    showModal() {
      this.showAddTable = true
    },
    /**
     * Function    : showEdit
     * Description : 编辑时显示
     * Input       : opt单个所有数据
     * Return      : none
     */
    showEdit(opt) {
      this.showAddTable = true
      this.id = opt.recordId
      this.name = opt.name
      this.code = opt.code
      this.labId = opt.labId
      this.labAddress = opt.labAddress
      this.description = opt.description
      this.pickLabObj(opt.labId)
      this.$nextTick(() => {
        this.form.setFieldsValue(this.$pick(opt, ['name', 'code', 'labId','labAddress','description']))
      })
    },

    pickLabObj(labId){
      let labSelectList = this.labSelectList
      for (let index in labSelectList){
        if (labSelectList[index].value === labId){
          this.labObj = {...labSelectList.record}
          return
        }
      }
    },

    /**
     * Function    : saveApply
     * Description : 角色信息新增、编辑保存
     * Input       : name
     * Return      : none
     */
    saveApply() {
      this.form.validateFields((err, value) => {
        if (!err) {
          let para = {}
          para.name = value.name
          para.code = value.code
          para.labId = this.labObj.recordId
          para.labAddress = this.labObj.buildName + '-' + this.labObj.name
          para.description = value.description
          if (!this.title) {
            para.recordId = this.id
          }
          this.$store.dispatch('saveRepairAct', para).then(response => {
            this.showAddTable = false
            if (response.code === 0) {
              this.$emit('init')
              this.$message.success(response.message)
            } else {
              this.$message.error(response.message)
            }
          })
        }
      })
    },

    /**
     * Function    : cancelApply
     * Description : 取消弹出框
     * Input       : val
     * Return      : none
     */
    cancelApply() {
      this.showAddTable = false
      let _this = this
      this.id = ''
      this.name = ''
      this.code = ''
      this.labId = ''
      this.labAddress = ''
      this.description = ''
      this.labObj = {}
      setTimeout(function () {
        _this.form.resetFields()
      }, 100)
    },


  },

  created() {
    this.$store.dispatch('getLabListAct', {})
  }
}
</script>
